<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit">

    <!-- TopJUI框架样式 -->
    <link type="text/css" href="/static/topjui/themes/default/topjui.core.min.css" rel="stylesheet">
    <link type="text/css" href="/static/topjui/themes/default/topjui.blue.css" rel="stylesheet" id="dynamicTheme"/>
    <!-- FontAwesome字体图标 -->
    <link type="text/css" href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- layui框架样式 -->
    <link type="text/css" href="/static/plugins/layui/css/layui.css" rel="stylesheet"/>
    <!-- jQuery相关引用 -->
    <script type="text/javascript" src="/static/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/static/plugins/jquery/jquery.cookie.js"></script>
    <!-- TopJUI框架配置 -->
    <script type="text/javascript" src="/static/public/js/topjui.config.js"></script>
    <!-- TopJUI框架核心-->
    <script type="text/javascript" src="/static/topjui/js/topjui.core.min.js"></script>
    <!-- TopJUI中文支持 -->
    <script type="text/javascript" src="/static/topjui/js/locale/topjui.lang.zh_CN.js"></script>
    <!-- layui框架js -->
    <script type="text/javascript" src="/static/plugins/layui/layui.js" charset="utf-8"></script>
</head>

<body>

<div data-toggle="topjui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'',border:false,width:'30%',iconCls:'fa fa-sitemap',headerCls:'border_right',bodyCls:'border_right'">
        <!-- treegrid表格 -->
        <table data-toggle="topjui-datagrid"
               data-options="id:'sDicCategoryDg',
                    reloadAfterSave:true,
                    selectOnCheck:true,
                    checkOnSelect:true,
                    url:'/sBch/data',
                    pageSize: 10,
                    childGrid:{
                        param:'userBch:bchCde',
                        grid:[
                            {type:'datagrid',id:'sUserDg'}
                        ]
                    }">
            <thead>
            <tr>
                <!--<th data-options="field:'uuid',title:'UUID',checkbox:true"></th>-->
                <th data-options="field:'bchCde',title:'机构编号',width:100"></th>
                <th data-options="field:'bchName',title:'机构名称',width:200"></th>
            </tr>
            </thead>
        </table>
    </div>

    <div data-options="region:'center',iconCls:'fa fa-book',title:'',split:true,border:true,headerCls:'border_top_none'">
        <div data-toggle="topjui-layout" data-options="fit:true">
            <div data-options="region:'north',title:'',height:'60%',fit:false,split:true,border:false,bodyCls:'border_bottom'">
                <div data-toggle="topjui-tabs">
                    <!-- 功能权限表格 -->

                    <div title="用户信息" data-options="id:'tab1',iconCls:'fa fa-th'">
                        <!-- datagrid表格 -->
                        <table data-toggle="topjui-datagrid"
                               data-options="id:'sUserDg',
                                    selectOnCheck:true,
                                    checkOnSelect:true,
                                    url:'/sUser/data',
                                    pageSize: 10,
                                    childGrid:{
                                        param:'userAccount:userAccount',
                                        grid:[
                                            {type:'datagrid',id:'sUserRoleDg'}
                                        ]
                                    }">
                            <thead>

                            <tr>
                                <!--<th data-options="field:'uuid',title:'UUID',checkbox:true"></th>-->
                                <th data-options="field:'id',title:'编号',hidden:true"></th>
                                <th data-options="field:'userAccount',title:'帐号'"></th>
                                <th data-options="field:'userName',title:'用户姓名',width:100"></th>
                                <th data-options="field:'userNickname',title:'昵称',width:100"></th>
                                <th data-options="field:'userIdTypeText',title:'证件类型'"></th>
                                <th data-options="field:'userIdNo',title:'证件号码'"></th>
                                <th data-options="field:'userTel',title:'手机号码'"></th>
                                <th data-options="field:'userEmail',title:'电子邮箱'"></th>
                                <th data-options="field:'userStsText',title:'状态',"></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false,bodyCls:'border_right',width:'40%'">
                <div data-toggle="topjui-tabs">
                    <!-- 功能权限表格 -->
                    <div title="角色信息" data-options="id:'tab1',iconCls:'fa fa-th'">
                        <table data-toggle="topjui-datagrid"
                               data-options="id:'sUserRoleDg',
                                            selectOnCheck:true,
                                            checkOnSelect:true,
                                            pageSize: 10,
                                            url:'/sUserRole/data'">
                            <thead>
                            <tr>
                                <!--<th data-options="field:'uuid',title:'UUID',checkbox:true"></th>-->
                                <th data-options="field:'roleCde',title:'角色编号'"></th>
                                <th data-options="field:'roleName',title:'角色名称'"></th>
                                <!--<th data-options="field:'roleStsText',title:'角色状态'"></th>-->
                                <th data-options="field:'userAccount',title:'用户账号',hidden:true"></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 用户 表格工具栏 -->
<div id="sUserDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'sUserDg'
       }">

    <form class="search-box" id="queryForm" name="dataForm" method="post" action="/sUser/data">
        <br/>
        <input type="text" name="userAccount" data-toggle="topjui-textbox"
               data-options="prompt:'帐号',width:135">
        <input type="text" name="userName" data-toggle="topjui-textbox"
               data-options="prompt:'用户姓名',width:135">
        <a href="javascript:void(0)"
           data-toggle="topjui-menubutton"
           data-options="method:'query',
            iconCls:'fa fa-search',
            btnCls:'topjui-btn-red',
            form:{id:'queryForm'},
            grid:{type:'datagrid','id':'sUserDg'}">查询</a>
    </form>
</div>


<!--职位-->
<div id="sUserRoleDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'sUserRoleDg'
       }" style="display:none">
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="
        btnCls:'topjui-btn-green',
        iconCls:'fa fa-plus',onClick:addUserRole">新增</a>
    <a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="method:'doAjax',
           extend:'#sUserRoleDg-toolbar',
           btnCls:'topjui-btn-red',
	       iconCls:'fa fa-trash',
	       grid:{uncheckedMsg:'请先勾选要删除的数据',param:'userAccount:userAccount,roleCde,roleCde'},
	       url:'/sUserRole/delete'">删除</a>
</div>


<script>
    //角色新增
    function addUserRole() {
        var sUserDg = $('#sUserDg').iDatagrid('getSelections');//勾选用户信息
        if (sUserDg.length <= 0) {
            return $.iMessager.alert('提示', '请先选择用户信息!', 'messager-info');
        }
        var userAccount = sUserDg[0].userAccount;
        var $editDialog = $('<div></div>');
        $editDialog.iDialog({
            title: '添加角色',
            width: 650,
            height: 300,
            closed: false,
            cache: false,
            href: '/sUserRole/add?userAccount=' + userAccount,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler: function () {
                    var rCde = $('#roleCde').iCombotree('getValues');
                    if (rCde.length <= 0) {
                        return $.iMessager.alert('提示', '请选择要添加的角色信息!', 'messager-info');
                    }
                    var url = '/sUserRole/save';
                    $.post(url, {
                        userAccount: userAccount,
                        roleCde: rCde.toString(),
                    }, function (res) {
                        if (200 == res.statusCode) {
                            $.iMessager.show({
                                title: '提示消息',
                                msg: '保存成功',
                                timeout: 1000,
                                showType: 'slide'
                            });
                            $editDialog.iDialog('close');
                            $('#sUserRoleDg').iDatagrid('reload', {userAccount: userAccount})
                        } else {
                            $.iMessager.alert('提示', res.message, 'info');
                        }
                    }, 'JSON');
                }
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                }
            }]
        });
    }
</script>
</body>

</html>

